<template>
    <div>
        <!-- <viewer :options="options" :images="images"
            @inited="inited"
            class="viewer" ref="viewer"
    >
      <template slot-scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
        {{scope.options}}
      </template>
    </viewer> -->
    <button type="button" @click="show">Show</button>
        <!-- <Carousel v-model="value1" loop>
                <CarouselItem>
                    <img :src="imgSrc1" class="imgSize"/>
                </CarouselItem>
                <CarouselItem>
                    <img :src="imgSrc2" class="imgSize"/>
                </CarouselItem>
                <CarouselItem>
                    <img :src="imgSrc3" class="imgSize"/>
                </CarouselItem>
                <CarouselItem>
                    <img :src="imgSrc4" class="imgSize"/>
                </CarouselItem>
        </Carousel> -->
    </div>
</template>

<script>
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
import Vue from 'vue';
Vue.use(Viewer)

export default {
    name: 'StudentProductForm',
    components: {
        Viewer
    },
    data() {
        return {
            // value1: 0,
            // imgSrc1: 'http://localhost/images/backUser/config/20210427011739aeea0311c00f4e028caec430b6d12fdd.jpg',
            // imgSrc2: 'http://localhost/images/backUser/config/20210427012155fa108b6d3fc546c0870e51959fcb03d8.jpg',
            // imgSrc3: 'http://localhost/images/backUser/config/20210427012413caf011ad93bf47368d237c96cbcabe48.jpg',
            // imgSrc4: 'http://localhost/images/backUser/config/20210427053128e7dda526150e4b069aff99fcd1c07b85.jpg'
            images: [
                'http://localhost/images/backUser/config/20210427011739aeea0311c00f4e028caec430b6d12fdd.jpg',
                'http://localhost/images/backUser/config/20210427012155fa108b6d3fc546c0870e51959fcb03d8.jpg',
                'http://localhost/images/backUser/config/20210427012413caf011ad93bf47368d237c96cbcabe48.jpg',
                'http://localhost/images/backUser/config/20210427053128e7dda526150e4b069aff99fcd1c07b85.jpg'
            ]
        }
    },
    methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      show () {
        this.$viewer.show()
      }
    }
}
</script>
<style scoped>
    .imgSize {
        height: 500px;
        width: 550px;
    }
</style>